import React from 'react';
import { Typography, Row, Col, Card, Statistic } from 'antd';
import { MedicineBoxOutlined, CalendarOutlined, CheckCircleOutlined, UserOutlined } from '@ant-design/icons';

const { Title } = Typography;

const Dashboard: React.FC = () => {
  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{ background: '#fff', padding: '24px', borderRadius: '8px', marginBottom: '24px' }}>
        <Title level={2} style={{ marginBottom: 0 }}>首页 / 仪表盘</Title>
        <p style={{ color: '#666', marginTop: '8px' }}>欢迎使用疫苗预约系统，这里是系统概览页面</p>
      </div>
      
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="可用疫苗"
              value={12}
              prefix={<MedicineBoxOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#52c41a', fontSize: '28px' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="今日预约"
              value={28}
              prefix={<CalendarOutlined style={{ color: '#1890ff' }} />}
              valueStyle={{ color: '#1890ff', fontSize: '28px' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="已完成"
              value={156}
              prefix={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#52c41a', fontSize: '28px' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable style={{ textAlign: 'center' }}>
            <Statistic
              title="注册用户"
              value={1024}
              prefix={<UserOutlined style={{ color: '#722ed1' }} />}
              valueStyle={{ color: '#722ed1', fontSize: '28px' }}
            />
          </Card>
        </Col>
      </Row>

      <Card style={{ marginTop: 24 }}>
        <Title level={4}>系统概览</Title>
        <p style={{ color: '#666', lineHeight: '1.6' }}>
          这里是系统概览信息，将显示重要的统计数据和快捷操作。您可以在这里查看：
        </p>
        <ul style={{ color: '#666', lineHeight: '1.8' }}>
          <li>疫苗库存情况</li>
          <li>预约统计数据</li>
          <li>用户活跃度</li>
          <li>系统运行状态</li>
        </ul>
      </Card>
    </div>
  );
};

export default Dashboard;
